<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CO-THINKER | People</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="icon" type="image/ico" href="../img/favicon.ico">
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            footer {
				background: none scroll repeat 0 0 #FFFFFF;
			}
        </style>
        <link rel="stylesheet" href="../css/bootstrap-responsive.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="../js/modernizr-2.6.1-respond-1.1.0.min.js"></script>
	</head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->
        <form id="form1" action="" method="POST">
        <jsp:include page="/client/NavBar.jsp"></jsp:include>
        	<!--/.navbar -->
        
        <div class="container-fluid">
        	<div class="row">
                <jsp:include page="/client/Accordian.jsp"></jsp:include>
                	<!--/#accordion -->
				<div class="container-fluid span9 offset*">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="container pull-left"><a class="brand" href="#">People You May Know:</a></div>
                        </div>
                    </div>
					<div>
						<table id="tblTests" class="table table-striped table-condensed table-hover">
	                    	<c:if test="${requestScope.status eq 'success'}">
								<c:forEach items="${requestScope.users}" var="user">
									<tr>
										<td class="span9" style="padding-left:10px;">
				                            <input type="text" id="txtI${user.userId}" name="txtI${user.userId}" value="${user.userId}" readonly="readonly" style="display: none;"/>
				                            <lable id="txtN${user.userId}" name="txtN${user.userId}">${user.displayName}</lable>
			                            </td>
			                            <td style="padding-left:50px;">
			                            	<input type="button" class="btn btn-info" id="btnFollowUser${user.userId}" name="btnFollowUser${user.userId}" value="Follow Me" onClick="followUser('follow','${user.userId}')"/>
			                            </td>
									</tr>
								</c:forEach>
							</c:if>
						</table>											
                    	<input type="submit" id="btnSubmit" name="btnSubmit" style="display:none;"/>
		                <input type="hidden" id="hdnUserId" name="hdnUserId"/>
    				</div>
                </div>
            </div>	<!--/.row div -->

        </div>	<!--/.container div -->
		
	
        
	<jsp:include page="/client/Footer.jsp"></jsp:include>
		</form>
        <script src="../js/jquery-1.8.2.js"></script>
        <script>window.jQuery || document.write('<script src="../js/jquery-1.8.2.js"><\/script>')</script>

        <script src="../js/bootstrap.js"></script>
        
        <script src="../js/main.js"></script>
        <script type="text/javascript">
	        function followUser( action, userId ){
        		userId = document.getElementById("txtI" + userId).value;
        		follow(userId);
	        }

	        function follow(userId){
	        	xmlHttp=GetXmlHttpObject()
	        	document.getElementById("hdnUserId").value = userId;
	        	var url="FollowUser";
	        	url=url+"?userId=" + userId;
	        	uid=userId;
	        	//alert(url);
	        	xmlHttp.onreadystatechange=stateChanged 
	        	xmlHttp.open("GET",url,true)
	        	xmlHttp.send(null)
	        }
	
	        function stateChanged(){
	        	if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
	        		var status=xmlHttp.responseText;
	        		//alert("status: " + status);
	        		//alert("Begin:" + status + ":End" + cid + "...");
	        		if(status == "User Followed"){
	        			document.getElementById("btnFollowUser" + uid).setAttribute("class","btn btn-success");
	        			document.getElementById("btnFollowUser" + uid).setAttribute("value","Followed"); 
	        		}
	        	} 
	        }
	
	        function GetXmlHttpObject(){
	        	var xmlHttp=null;
	        	try{
	        	xmlHttp=new XMLHttpRequest();
	        	}
	        	catch (e) {
	        	try {
	        	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	        	}
	        	catch (e){
	        	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	        	}
	        	}
	        	return xmlHttp;
	        }
	
        </script>

        <script type="text/javascript">
	        $("#people").addClass("active");
	        $("#collapse2").addClass("in");
        </script>
        
    </body>
</html>